<template>
  <view class="subscribe">
    <custom-navi :show-home="false">
      提前预约时间
      <view slot="right" class="nav-right" @tap="handleSave">保存</view>
    </custom-navi>
    <view class="subscribe-list">
    	<view class="">请您提前</view>
		<view class=""><input type="number" value="" placeholder="填写数字" placeholder-style="font-size:26rpx;" @input="numInput"/></view>
		<view class="" @click="unitsBtn"><input type="text" :value="unitsTxt" placeholder="选择单位"  placeholder-style="font-size:26rpx;" disabled="disabled"></view>
		<view class="">预约</view>
    </view>
	<uni-popup ref="popup" type="bottom">
		<view class="txtModal">
			<view class="txtModal-title">
				<view class="txt">请选择数字单位</view>
				<view class="cancel" @click="cancelBtn">x</view>
			</view>
			<view class="txtModal-txt">
				<view class="details" v-for="(item,index) in unitsData" :key='index' @click="pitchOn(index)" :class="{active:unitsTag === index}">
					{{item.name}}
				</view>
			</view>
			<view class="txtModal-btn" @click="ensureBtn">确定</view>
		</view>
	</uni-popup>
  </view>
</template>

<script>
	import uniPopup from '@/src/pages/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
  data () {
    return {
      unitsData:[
      	{name:'天',active:false},
      	{name:'小时',active:false},
      	{name:'分钟',active:false}
      ],
	  unitsTag:'',
	  unitsTxt:'',
	  inputNum:''
    }
  },
  // onUnload () {
  //   uni.$off()
  // },
  onShow() {
  	// const _self = this
  	// uni.getStorage({
  	//     key: 'introduce',
  	//     success: function (res) {
  	//         // console.log(res.data);
  	// 		// _self.val = res.data
  	//     }
  	// });
  },
  methods: {
   handleSave(){
	   let subscribe = this.inputNum+this.unitsTxt
	   uni.setStorageSync('subscribe', subscribe)
	   this.$utils.common.navigateBack()
   },
   numInput(e){
	   this.inputNum = e.detail.value
	   // console.log(e)
   },
   unitsBtn(){
	   this.$refs.popup.open()
   },
   cancelBtn(){
   	this.$refs.popup.close()
   },
   pitchOn(index){
	   this.unitsTag = index
   },
   ensureBtn(){
	   this.unitsTxt = this.unitsData[this.unitsTag].name
	   this.$refs.popup.close()
   }
  },
}
</script>
<style>
/* page {
  background-color: #ffffff;
} */
</style>
<style lang="scss" scoped>
	.subscribe{
		&-list{
			width:692rpx;
			margin: 0 auto;
			background:rgba(255,255,255,1);
			opacity:1;
			border-radius:16rpx;
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			padding: 22rpx 22rpx;
			view{
				flex: 1;
				text-align: center;
				font-size:26rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(69,69,69,1);
				opacity:1;
				input{
					border-bottom:2rpx solid rgba(226,226,226,1);
				}
				margin-left: 16rpx;
			}
		}
		.txtModal{
			width:750rpx;
			// height:754rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			border-radius:20rpx 20rpx 0rpx 0rpx;
			padding: 50rpx 36rpx;
			&-title{
				display: flex;
				margin-bottom: 64rpx;
				.txt{
					font-size:34rpx;
					font-family:PingFang SC;
					font-weight:500;
					color:rgba(29,29,29,1);
					opacity:1;
				}
				.cancel{
					font-size:34rpx;
					margin-left: auto;
				}
			}
			&-txt{
				margin-bottom: 30rpx;
				.list{
					width: 100vh;
					padding: 20rpx 0;
					font-size:28rpx;
					font-family:PingFang SC;
					font-weight:400;
					color:rgba(29,29,29,1);
					opacity:1;
				}
				.listActive{
					color:rgba(12, 212, 211, 1);
				}
				.details{
					display: inline-block;
					width:210rpx;
					height:80rpx;
					text-align: center;
					background:rgba(255,255,255,1);
					border:2rpx solid rgba(214,214,214,1);
					border-radius:6rpx;
					font-size:38rpx;
					font-family:PingFang SC;
					font-weight:400;
					line-height:80rpx;
					color:rgba(74,74,74,1);
					margin-right: 16rpx;
					margin-bottom: 60rpx;
					opacity:1;
				}
				.active{
					background:rgba(12, 212, 211, 1) ;
					color: rgba(255, 255, 255, 1);
				}
			}
			&-btn{
				width:678rpx;
				height:88rpx;
				background:rgba(12,212,211,1);
				opacity:1;
				border-radius:20rpx;
				margin: 0 auto;
				text-align: center;
				font-size:40rpx;
				font-family:PingFang SC;
				font-weight:400;
				line-height:88rpx;
				color:rgba(255,255,255,1);
				// position: absolute;
			}
		}
	}
.nav-right {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
  }
</style>